今日文章目錄

• 需求說明
• 事前準備
• 過程紀錄
• 參考紀錄

需求說明

• 在每個ToDoList項目中，紀錄花費時間。
• 在番茄鐘視窗上也可以勾選完成，顯示完成時間。

事前準備

• 資料結構：

[    
    {
        categoryId: 1,
        category: "work",
        listData:[
            {
                id: 1,                
                value: "Learn JS",    
                status: "unfinished", 
                priority: 1,          
                spendTime: 180,            // 新增：紀錄花費時間(秒數)
            },
            {
                id: 2,                
                value: "Learn React", 
                status: "finished",   
                priority: 3,          
                spendTime: 0,         
            },

            ...
        ],
    },
    
    ...
]

過程紀錄

• 大致想法規劃：
  • 點擊項目播放番茄鍵： 顯示番茄鐘視窗
  • 番茄鐘視窗點擊完成鍵，將花費時間紀錄下來。（每次花費的時間累加）
• codepen 練習：https://codepen.io/chen-chens/pen/XWgERoN?editors=0010
• 顯示效果：
  • 點擊完成鍵，顯示花費時間完成
    
  • 取消完成鍵，顯示已花費時間
    

覺得code 越來越髒了...